import { Button, Card, List, Popover, Space } from "antd"
import { useEffect, useState } from "react"
import { RedisClient, listClient } from "@linksaas-minapp/redis-proxy-api"
import { MoreOutlined, PlusOutlined } from "@ant-design/icons";
import ConnModal from "./components/ConnModal";
import s from "./ConnList.module.less";
import classNames from "classnames";
import { getMinAppInfo } from "@linksaas-minapp/api";

export interface ConnListProps {
    onChange: (client: RedisClient | null) => void;
}

function ConnList(props: ConnListProps) {
    const [clientList, setClientList] = useState<RedisClient[]>([]);
    const [showAddModal, setShowAddModal] = useState(false);
    const [curConnId, setCurConnId] = useState("");

    const loadConnList = async () => {
        const minApp = getMinAppInfo();
        const res = await listClient(minApp?.redisProxyAddr ?? "", minApp?.redisProxyToken ?? "");
        console.log("redis client", res);
        setClientList(res);
    };

    const removeClient = async (connId: string) => {
        const tmpList = clientList.slice();
        const index = tmpList.findIndex(item => item.getConnId() == connId);
        if (index != -1) {
            const newList = clientList.filter(item => item.getConnId() !== connId);
            setClientList(newList);

            await tmpList[index].close();
            if (curConnId == connId) {
                if (newList.length == 0) {
                    setCurConnId("");
                    props.onChange(null);
                } else {
                    setCurConnId(newList[0].getConnId());
                    props.onChange(newList[0]);
                }
            }
        }
    };

    useEffect(() => {
        loadConnList();
    }, []);

    useEffect(() => {
        const minAppInfo = getMinAppInfo();
        if (minAppInfo != undefined && minAppInfo.extraInfo != undefined && minAppInfo.extraInfo.length > 0) {
            setShowAddModal(true);
        }
    }, []);

    return (
        <Card style={{ height: "100vh", borderRadius: "0px" }}
            title="redis连接"
            extra={
                <Space>
                    <Button type="text" style={{ minWidth: "0px", padding: "0px 10px" }}
                        onClick={e => {
                            e.stopPropagation();
                            e.preventDefault();
                            setShowAddModal(true);
                        }}><PlusOutlined /></Button>
                </Space>
            }>
            <List dataSource={clientList} renderItem={item => (
                <List.Item key={item.getConnId()} className={classNames(s.conn, curConnId == item.getConnId() ? s.active : "")}>
                    <div style={{ display: "flex" }}>
                        <div className={s.name} onClick={e => {
                            e.stopPropagation();
                            e.preventDefault();
                            setCurConnId(item.getConnId());
                            props.onChange(item);
                        }}>{item.getName()}</div>
                        <Popover trigger="click" placement="bottom" content={
                            <div>
                                <Button type="link" danger onClick={e => {
                                    e.stopPropagation();
                                    e.preventDefault();
                                    removeClient(item.getConnId());
                                }}>删除</Button>
                            </div>
                        }>
                            <MoreOutlined />
                        </Popover>
                    </div>
                </List.Item>
            )} />
            {showAddModal == true && (
                <ConnModal onCancel={() => setShowAddModal(false)} onOk={client => {
                    setClientList([...clientList, client]);
                    setShowAddModal(false);
                }} />
            )}
        </Card>
    );
}

export default ConnList;